// useState函数调用的参数写法 
// 场景: 如果状态的初始值需要通过一定的计算才能得到
// 语法: useState(()=>{ return 计算得到的值 }) -> [state,setState]

// 注意: 不用担心额外的重复计算  这个return出来的函数执行 只会在useState首次初始化的时候
// 执行一次 以后再更新 getList函数都不会重新执行了

import { useState } from "react"

function getList () {
  console.log('获取数据的函数被执行了')
  const list = [
    {
      name: 'cp',
      age: 18
    },
    {
      name: 'cp1',
      age: 28
    },
    {
      name: 'cp2',
      age: 38
    },
  ]
  return list.map(item => item.age)
}
const App = () => {
  const [list, setList] = useState(() => {
    return getList()
  })
  return (
    <div>
      <ul>
        {
          list.map(item => <li>{item}</li>)
        }
      </ul>
      <button onClick={() => setList([...list, 48])}>add</button>
    </div >
  )
}

export default App